<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import HeadContent from '@/components/HeadContent.vue'
import { handleCheckIn, handleCheckOut, handleCheckSelect } from '@/api/clock'
import type { Clock } from '@/model'
// 用于存储当前时间
const currentYear = ref('')
const currentMonth = ref('')
const currentDay = ref('')
const currentHour = ref('')
const currentMinute = ref('')
const currentSecond = ref('')

// 更新时间的函数
const updateTime = () => {
  const now = new Date()
  currentYear.value = now.getFullYear().toString()
  currentMonth.value = (now.getMonth() + 1).toString().padStart(2, '0')
  currentDay.value = now.getDate().toString().padStart(2, '0')
  currentHour.value = now.getHours().toString().padStart(2, '0')
  currentMinute.value = now.getMinutes().toString().padStart(2, '0')
  currentSecond.value = now.getSeconds().toString().padStart(2, '0')
}


const handleCheckInFn = async () => {
  const res = await handleCheckIn()
  handleCheckSelectFn()
  ElMessage.success('打卡成功')
  console.log(res.data)
}
const handleCheckOutFn = async () => {
  const res = await handleCheckOut()
  handleCheckSelectFn()
  ElMessage.success('打卡成功')
  console.log(res.data)
}

const clock = ref<Clock>({
  username: '',
  clockInTime: '',
  clockOutTime: ''
})

const handleCheckSelectFn = async () => {
  const res = await handleCheckSelect()
  console.log(res);
  clock.value = res.data
  
}
handleCheckSelectFn()

// 在组件挂载后每秒更新时间
onMounted(() => {
  updateTime()
  setInterval(updateTime, 1000)
})

const now = new Date()
const hours = now.getHours()
// console.log(now.getHours());

</script>

<template>
  <div>
    <!-- 内容头部 -->
    <HeadContent title="审批休假"></HeadContent>
    <TagComtent></TagComtent>

    <!-- 内容标题 -->
    <div class="content-title"></div>

    <!-- 轮播图 -->
    <div class="block text-center">
      <el-carousel height="215px">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3 class="small justify-center" text="2xl"></h3>
        </el-carousel-item>
      </el-carousel>

      <div class="time-text">
        <h1>当前服务器时间</h1>
      </div>
      <!-- 时间显示圆形组件 -->
      <div class="time-container">
        <div class="time-circle">
          {{ currentYear }} <br />
          &nbsp;&nbsp;年
        </div>
        <div class="time-circle">
          {{ currentMonth }} <br />
          月
        </div>
        <div class="time-circle">
          {{ currentDay }}
          <br />
          日
        </div>
        <div class="time-circle">
          {{ currentHour }}
          <br />
          时
        </div>
        <div class="time-circle">
          {{ currentMinute }}
          <br />
          分
        </div>
        <div class="time-circle">
          {{ currentSecond }}
          <br />
          秒
        </div>
      </div>
    </div>
    <div class="qiandao">
      <div class="daka" >
        <el-button type="primary" @click="handleCheckInFn()" :disabled=" !(hours == 8 || hours ==7)">上班打卡</el-button>
      </div>
      <div class="daka">
        <el-button type="primary" @click="handleCheckOutFn()" :disabled=" !(hours >= 17 && hours <= 23)">下班打卡</el-button>
        <h1></h1>
      </div>
     
    </div>
    <div class="dakaren">
       <el-card style="width: 1400px; height: 120px">
        <el-table :data="[clock]" :border="true" stripe style="width: 100%; height: 80px;">
          <el-table-column prop="username" label="姓名"  style="height: 50px !important;" align="center" />
          <el-table-column prop="clockInTime" label="上班打卡"  align="center" />
          <el-table-column prop="clockOutTime" label="下班打卡"  align="center" />
        </el-table>
       </el-card>
    </div>
  </div>
</template>

<style scoped>
/* 打卡人 */
.dakaren {
  margin: 50px auto 0;
  width: 90%;
  height: 100px;
  /* background-color: antiquewhite; */
  display: flex;
  align-items: center;
}

.dakaren table {
  border-collapse: collapse;
  /* border: 1px solid black; */
}

.dakaren table th {
  height: 40px;
  /* background-color: pink; */

}

.dakaren table h1 {
  background-color: rgb(79, 181, 211);
  font-weight: 700;
  font-size: 20px;
  color: white;
  /* border: 1px solid black; */
}

.dakaren th {
  font-size: 15px;
  font-weight: 500;
  border-left: 1px solid rgb(79, 181, 211);
  border-right: 1px solid rgb(79, 181, 211);
  border-bottom: 1px solid rgb(79, 181, 211);
}

/* 打卡 */
.qiandao {
  height: 76px;
  width: 50%;
  margin: 20px auto 0;
  background-color: pink;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.daka {
  text-align: center;
  height: 46px;
  width: 25%;
  /* background-color: rgb(79, 181, 211); */
  /* 初始背景颜色 */
  /* margin-left: 50px; */
  border: none;
  font-weight: 700;
  color: white;
  /* 初始字体颜色 */
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  /* 鼠标指针样式 */
  transition: all 0.3s ease;
  /* 添加过渡效果 */
}

/* 鼠标悬停时的样式 */
.el-button {
  width: 140px;
  font-size: 25px;
  height: 50px;
}

.content-header {
  width: 100%;
  height: 80px;
  background-color: pink;
  display: flex;
  align-items: center;
}

.content-header h1 {
  font-size: 30px;
}

.content-title {
  width: 100%;
  height: 38px;
  background-color: #99a9bf;
}

/* 轮播图 */

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/* 轮播图容器相对定位 */
.block {
  position: relative;
}

/* 时间显示圆形组件 */
.time-container {
  display: flex;
  position: absolute;
  bottom: 15%;
  /* 调整圆形组件的位置，离轮播图的顶部 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  z-index: 10;
  /* 确保时间组件显示在轮播图上方 */
}

.time-text {
  position: absolute;
  top: 1%;
  /* 调整圆形组件的位置，离轮播图的顶部 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  z-index: 10;
  /* 确保时间组件显示在轮播图上方 */
}

.time-text {
  font-size: 25px;
}

.time-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 18px;
  font-weight: bold;
}
</style>
